<template>
	<div class="main">
		<navTop></navTop>
		<!-- <div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item>学校信息</el-breadcrumb-item>
			  <el-breadcrumb-item>任务管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div> -->
		<div class="contentMain">
			<div class="searchlist">
				<router-link to="/studentinfo" active-class="hover">学生信息</router-link>
				<router-link to="/teacherinfo" active-class="hover">教师信息</router-link>
				<router-link to="/grademanagement" active-class="hover">年级管理</router-link>
				<router-link to="/classmanagement" active-class="hover">班级管理</router-link>
				<router-link to="/subjectmanagement" active-class="hover">科目管理</router-link>
				<router-link to="/subjectselectionmanagement" active-class="hover">选科管理</router-link>
				<router-link to="/topicmanagement" active-class="hover">题型管理</router-link>
				<!-- <router-link to="/" active-class="hover">上线管理</router-link> -->
				<router-link to="/taskset" active-class="hover">任务设置 </router-link>
			</div>
			<div class="jkgailanContent">
				<div class="jkgailanContentLeft">
					<ul class="subjectlistbox">
						<li v-for="(item,index) in subjectlist" @click="subjecttab(item.id,index)" :class="index==tabclass?'hover':''">{{item.name}}</li>
					</ul>
				</div>
				<div class="jkgailanContentRight">
					<div class="allocationgz">
						<span>教师分配原则：</span>
						<ul>
							<li :class="fpmodel==1?'hover':''" @click="teacherfpfs(1)">效率模式</li>
							<li :class="fpmodel==2?'hover':''" @click="teacherfpfs(2)">平均模式</li>
							<li :class="fpmodel==3?'hover':''" @click="teacherfpfs(3)">定量模式</li>
						</ul>
					</div>
					<div class="allocationContent">
						<div class="allocationContentLeft">
							<div class="allocationAttentionLeft">
								<span>待分配教师：<i>{{Teachertobeassigned.length}}</i>/位</span>
							</div>
							<div class="tableStyle">
								<table cellspacing="0" cellpadding="0" style="width:100%">
									<tr>
										<th>待分配教师</th>
										<th>操作</th>
									</tr>
									<tr v-for="(item,index) in Teachertobeassigned">
										<td>{{item.name}}<i>/{{item.phoneNumber}}</i></td>
										<td><button v-preventReClick="1000" @click="addteacher(item,index)">加入分配<em class="el-icon-plus"></em></button></td>
									</tr>
								</table>
							</div>
							<div class="buttonBox">
								<b @click="allteacher">全部分配</b>
							</div>
						</div>
						<div class="allocationContentRight">
							<div class="allocationAttentionRight">
								<div class="aartop">
									<span>已分配教师：<i>{{assignedteacher.teachers.length}}</i>/位</span>
								</div>
								<div class="aarbottom">
									<span>题组分配：</span>
									<el-select v-model="assignedteacher.preference" placeholder="请选择" @change="preferencechange">
									    <el-option
									      v-for="item in questiontz"
									      :key="item.id"
									      :label="item.name"
									      :value="item.id">
									    </el-option>
									</el-select>
									<em class="tmguanli" @click="$router.push('/topicmanagement')" style="cursor: pointer;">题型管理</em>
								</div>
							</div>
							<div class="tableStyle">
								<table cellspacing="0" cellpadding="0" style="width:100%">
									<tr>
										<th>已分配教师</th>
										<th>手机号&账号</th>
										<th>题组偏好</th>
										<th>操作</th>
									</tr>
									<tr v-for="(item,index) in assignedteacher.teachers" v-if="assignedteacher.teachers">
										<td>{{item.name}}</td>
										<td>{{item.phoneNumber}}</td>
										<td>
											<el-select v-model="item.questionRules" multiple placeholder="请选择" @change="chooseteacherlist">
												<el-option
												  v-for="options in questionteam"
												  :key="options.id"
												  :label="options.name"
												  :value="options.id">
												</el-option>
											</el-select>
										</td>
										<td><button class="yichuteacher" v-preventReClick="2000" @click="yichufenpei(item,index)">移除分配<em class="el-icon-minus"></em></button>	</td>
									</tr>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/homework/headtop.vue"
	import { get, post, del, put } from '../../request/api.js'
	export default{
		data(){
			return{
				subjectlist:[],
				Teachertobeassigned:[],
				assignedteacher:{
					id:0,
					courseId: 0,
					examId: 0,
					preference:0,
					mode:1,
					teachers:[
						{
							id:0,
							taskAssignmentId:0,
							teacherId:0,
							questionRules: []
						}
					]	
				},
				fpmodel:1,
				tabclass:0,
				questiontz:[
					{
						name:'平均',
						id:0
					},
					{
						name:'偏好',
						id:1
					}
				],
				team:'',
				teacherlist:[],
				questionteam:[],
				subjectId:''
			}
		},
		mounted() {
			this.subjectlisttab()
			this.questionnumlist()
		},
		methods:{
			//获取题目列表
			questionnumlist(){
				get('/questionrules/subjectives')
				.then(res=>{
					 if(res.code==200){
						 this.questionteam = res.data
					 }else{
						 this.$message.error(res.message); 
					 }
				})
				.catch(error=>{
					 this.$message.error(error.message); 
				})
			},
			// 加入分配
			addteacher(con,index){
				// this.teacherlist.push(con)
				// //console.info(this.teacherlist)
				let techerarry = []
				// this.teacherlist.map(item => {
					techerarry.push({
						id: 0,
						  taskAssignmentId: 0,
						  teacherId: con.teacherId,
						  name:con.name,
						  phoneNumber:con.phoneNumber,
						  questionRules:[]
					})
				// })
				// //console.info(this.assignedteacher.teachers)
				this.assignedteacher.teachers.push(techerarry[0]) 
				this.SaveTeacher()
			},
			// 移除分配
			yichufenpei(con,index){
				let teacher = {
					teacherId:con.teacherId,
					name:con.name,
					phoneNumber:con.phoneNumber
				}
				this.assignedteacher.teachers.splice(index,1)
				// //console.info(this.assignedteacher.teachers)
				this.SaveTeacher()
			},
			//切换题组
			chooseteacherlist(val){
				// //console.info(val)
				// //console.info(this.assignedteacher.teachers)
				// return false
				// this.assignedteacher.teachers = this.assignedteacher.teachers
				this.SaveTeacher()
			},
			// 全部分配
			allteacher(){
				// // this.teacherlist = [...this.teacherlist,...this.Teachertobeassigned]
				// // this.Teachertobeassigned = []
				// //console.info(this.Teachertobeassigned)
				let allteachelist = []
				allteachelist = this.Teachertobeassigned.map(item => ({
				  id: 0,
				  taskAssignmentId: 0,
				  teacherId: item.teacherId,
				  tearchename:item.name,
				  teacherphone:item.phoneNumber,
				  questionRules:[]
				}));
				this.assignedteacher.teachers=[...this.assignedteacher.teachers,...allteachelist]
				// //console.info(this.assignedteacher.teachers)
				this.SaveTeacher()
			},
			//分配模式
			teacherfpfs(num){
				this.fpmodel = num
				let obj={
					courseId:this.subjectId,
					examId:0,
					mode:num
				}
				put('/taskassignment/switch',obj)
				.then(res=>{
					//console.info(res)
					this.tasklisttab(this.subjectId)
					this.teachertasklist(this.subjectId)
				})
				.catch(error=>{
					
				})
				// this.SaveTeacher()
			},
			// 获取科目列表
			subjectlisttab(){
				get('/course/alllist')
				.then(res=>{
					if(res.code==200){
						this.subjectlist = res.data
						this.tasklisttab(res.data[0].id)
						this.teachertasklist(res.data[0].id)
						this.subjectId = res.data[0].id
					}else{
						 this.$message.error(res.message); 
					}
				})
				.catch(error=>{
					 this.$message.error(error.message); 
				})
			},
			subjecttab(id,num){
				this.tasklisttab(id)
				this.teachertasklist(id)	
				this.tabclass = num
				this.subjectId = id
			},
			// 获取问题规则ID
			    getQuestionRulesIds(rules) {
			        // 确保 rules 是数组
			        if (!Array.isArray(rules)) {
			            return [];
			        }
			        // 提取每个规则的 id
			        return rules
			            .filter(rule => rule && rule.questionRules.id) // 过滤掉无效的规则
			            .map(rule => rule.questionRules.id);
			    },
			//获取任务分配列表
			tasklisttab(id) {
			    let obj = {
			        courseId: id,
			        examId: 0
			    }
			    get('/taskassignment/data', obj)
			        .then(res => {
			            if(res.code == 200) {
			                let newteachers = [];
							this.fpmodel = res.data.taskAssignments.mode==0?1:res.data.taskAssignments.mode
			                const teachers = res.data.taskAssignments.teachers;
			                
			                for(let i = 0; i < teachers.length; i++) {
			                    const item = teachers[i];
			                    let teacherData = {
			                        id: item.id,
			                        taskAssignmentId: item.taskAssignmentId,
			                        teacherId: item.teacherId,
			                        name: item.teacher.name,
			                        phoneNumber: item.teacher.phoneNumber,
			                        // 如果 questionRules 存在且有值，获取第一个规则的 id
			                        questionRules:this.getQuestionRulesIds(item.questionRules)
			                    };
			                    newteachers.push(teacherData);
			                }
							// setTimeout(()=>{
							// 	//console.info(newteachers)
							// },1000)
			                // // 更新数据
			                this.$set(this.assignedteacher, 'teachers', newteachers);
							//console.info(this.assignedteacher)
			            } else {
			                this.$message.error(res.message);
			            }
			        })
			        // .catch(error => {
			        //     this.$message.error(error.message);
			        // });
			},
			// 获取教师分配
			teachertasklist(id){
				let obj={
					courseId:id,
					examId:0
				}
				get('/taskassignment/teacher',obj)
				.then(res=>{
					if(res.code==200){
						// //console.info(res)
						this.Teachertobeassigned = res.data
					}else{
						 this.$message.error(res.message); 
					}
				})
				.catch(error=>{
					 this.$message.error(error.message); 
				})
			},
			preferencechange(val){
				this.assignedteacher.preference =val
				this.SaveTeacher()
			},
			//保存
			SaveTeacher(){
				this.assignedteacher.courseId = this.subjectId
				this.assignedteacher.examId = 0
				this.assignedteacher.mode = this.fpmodel
				// this.assignedteacher.teachers = this.assignedteacher.teachers.map((teacher) => {
				//     // 提前解构并设置默认值
				//     const { id = 0, teacherId = 0, questionRules = [] } = teacher;
				//     return {
				//         id,
				//         taskAssignmentId: teacherId,
				//         teacherId,
				//         questionRules: questionRules.length > 0
				//             ? questionRules.map((rule) => {
				//                   const { id: ruleId = 0, taskAssignmentTeachersId = 0, questionRulesId = 0 } = rule;
				//                   return {
				//                       id: ruleId,
				//                       taskAssignmentTeachersId,
				//                       questionRulesId,
				//                       questionId: 0,
				//                   };
				//               })
				//             : [], // 如果 questionRules 为空，直接返回空数组
				//     };
				// });
				// //console.info(this.assignedteacher.teachers)
				// return false
				 this.assignedteacher.teachers = this.assignedteacher.teachers.map(teacher => {
				        // 确保 questionRules 是数组且有值
				        const hasValidRules = Array.isArray(teacher.questionRules) && 
				                            teacher.questionRules.length > 0;
				        return {
				            id: teacher.id || 0,
				            taskAssignmentId: teacher.teacherId || 0,
				            teacherId: teacher.teacherId || 0,
				            questionRules: hasValidRules ? 
				                teacher.questionRules.map(rule => {
				                    // 确保每个 rule 对象都有所需的属性
				                    return {
				                        id: rule.id || 0,
				                        taskAssignmentTeachersId: rule.taskAssignmentTeachersId || 0,
				                        questionRulesId: rule.questionRulesId || rule,
				                        questionId: 0
				                    };
				                }) : []
				        };
				    });
				// //console.info(this.assignedteacher.teachers)
				// return false
				post('/taskassignment/save',this.assignedteacher)
				.then(res=>{
					this.tasklisttab(this.subjectId)
					this.teachertasklist(this.subjectId)
					let obj={
						id:0,
						taskAssignmentId:0,
						teacherId:0,
						questionRules:[]
					}
					res.data.map((item,index)=>{
						obj.name=item.name
						obj.phoneNumber=item.phoneNumber
						obj.teacherId=item.teacherId
						this.assignedteacher.teachers[index].push(obj)
					})
				})
				// .catch(error=>{
					
				// })
			}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	/* .main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	} */
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:30px;
	}
	.breadBox{
		height:32px;
		background: #fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.jkgailanContent{
		display: flex;
		justify-content: space-between;
		margin-top:14px;
	}
	.jkgailanContentLeft{
		width: 180px;
		height:calc(100vh - 200px);
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		overflow-y:auto ;
		overflow-x: hidden;
	}
	.jkgailanContentRight{
		box-sizing:border-box;
		width:calc(100% - 195px);
		height:calc(100vh - 200px);
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		overflow-y:auto ;
		overflow-x: hidden;
		padding:20px;
	}
	.allocationgz{
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.allocationgz span{
		color:#2A303B;
		font-size:14px;
	}
	.allocationgz ul{
		display: flex;
		align-items: center;
		width: 252px;
		height: 30px;
		background: rgba(41,92,255,0.06);
		border-radius: 4px;
		border: 1px solid #295CFF;
	}
	.allocationgz ul li{
		line-height:30px;
		border-right:solid 1px #295CFF;
		font-size: 14px;
		color: #295CFF;
		cursor: pointer;
		flex: 1;
		text-align: center;
	}
	.allocationgz ul li:last-child{
		border-right:none;
	}
	.allocationgz ul li:hover,.allocationgz ul li.hover{
		background: #295CFF;
		color:#fff;
	}
	.allocationgz ul li:first-child:hover,.allocationgz ul li:first-child.hover{
		border-radius: 3px 0px 0px 3px;
	}
	.allocationgz ul li:last-child:hover,.allocationgz ul li:last-child.hover{
		border-radius: 0px 3px 3px 0px;
	}
	.allocationContent{
		display: flex;
		/* align-items: center; */
		justify-content: space-between;
		margin-top:14px;
	}
	.allocationAttentionLeft{
		box-sizing: border-box;
		width:290px;
		height: 54px;
		background: #E8F0FA;
		border-radius: 10px 10px 0px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:14px;
		padding:0 14px;
	}
	.allocationAttentionLeft span{
		color:#557292;
	}
	.allocationAttentionLeft span i{
		font-style: normal;
		color:#295CFF;
	}
	.allocationAttentionLeft b{
		cursor: pointer;
		font-weight: normal;
		color: #295CFF;
	}
	.tableStyle{
		background:#fff;
		padding:14px;
		height:calc(100vh - 430px);
		overflow-y: auto;
		overflow-x: hidden;
	}
	.tableStyle::-webkit-scrollbar {
		 width:4px;
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.tableStyle table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableStyle table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableStyle table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableStyle table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableStyle table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableStyle table tr td:last-child{
		border-right:none;
	}
	.tableStyle table tr td i{
		font-style: normal;
		font-size:12px;
		color:#999
	}
	.tableStyle table tr td button{
		display: flex;
		align-items: center;
		color:#295CFF;
		justify-content: center;
		cursor: pointer;
		border:none;
		background:none;
		width: 100%;
	}
	.tableStyle table tr td button em{
		font-size:12px;
		font-style:normal;
		margin-left:5px;
	}
	.tableStyle table tr td div.caozuo button{
		width:auto;
	}
	.tableStyle table tr td button.yichuteacher{
		color:#EC555A
	}
	.tableStyle table tr:nth-child(3n){
		background:#FAFAFB
	}
	.tableStyle table tr td >>>.el-input__inner{
		width: 150px;
		height: 30px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.tableStyle table tr td >>> .el-input__icon{
		line-height:30px;
	}
	.buttonBox{
		width:100%;
		height:60px;
		background:#fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius:0 0 10px 10px;
	}
	.buttonBox b{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-weight: normal;
		font-size:14px;
		color:#fff;
		cursor: pointer;
		text-align: center;
		line-height:34px;
		margin:0 8px;
	}
	.buttonBox b:nth-child(2){
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF
	}
	.allocationAttentionRight{
		box-sizing: border-box;
		width: 100%;
		height: 54px;
		background: #E8F0FA;
		border-radius: 10px 10px 0px 0px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size:14px;
		padding:0 14px;
	}
	.aartop{
		color:#557292;
	}
	.aartop span{
		margin-right:14px;
	}
	.aartop i{
		font-style: normal;
		color: #295CFF;
	}
	.aarbottom{
		color:#557292;
		display: flex;
		align-items: center;
	}
	.aarbottom >>> .el-input__inner{
		width: 188px;
		height: 34px;
		background: #FFFFFF;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
		line-height:34px;
	}
	.aarbottom >>>  .el-input__icon{
		line-height:34px;
	}
	.aarbottom em{
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-style:normal;
		font-size:14px;
		color:#fff;
		text-align: center;
		line-height:34px;
		margin-left:14px;
	}
	.allocationContentLeft,.allocationContentRight{
		border:solid 1px #E8F0FA;
		border-radius:10px;
	}
	.allocationContentRight{
		width:calc(100% - 310px)
	}
	.subjectlistbox{
	}
	.subjectlistbox li{
		line-height:34px;
		padding:0 0 0 34px;
		background:url(../../assets/image/school/sbuject.png) no-repeat 14px center;
		background-size:12px auto;
		font-size:14px;
		color:#2A303B;
		cursor:pointer
	}
	.subjectlistbox li:nth-child(2n-1){
		background:#FAFAFB url(../../assets/image/school/sbuject.png) no-repeat 14px center;
		background-size:12px auto;
	}
	.subjectlistbox li:hover,.subjectlistbox li.hover{
		color:#295CFF;
		background: #F2F6FB url(../../assets/image/school/sbuject.png) no-repeat 14px center;
		background-size:12px auto;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>